<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .model {
      width: 500px;
      height: 300px;
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      border: 1px solid #ccc;
      display: flex;
      flex-direction: column;
    }

    .title {
      height: 50px;
      line-height: 50px;
      background-color: aqua;
      /* position: ; */
    }

    .content {
      flex: 1;
    }

    .footer {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .cancel {
      margin-right: 20px;
    }

    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 30px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <!-- <div class="model">
    <div class="title">
      <span>标题</span>
      <span class="close">x</span>
    </div>
    <div class="content">content</div>
    <div class="footer">
      <button class="cancel">取消</button>
      <button class="ok">确定</button>
    </div>
  </div> -->
  <button id="show">弹出</button>
  <script>
    let count = 1;
    // let instance = null;
    // class A { }
    // // const p1 = new A()
    // // const p2 = new A()
    // function singleMode() {
    //   if (!instance) {
    //     instance = new A()
    //   }
    //   return instance
    // }
    // const p1 = singleMode()
    // const p2 = singleMode()
    // 改造单例模式核心代码
    // const singleMode = (function () {
    //   let instance = null;
    //   class A { }
    //   return () => {
    //     if (!instance) {
    //       instance = new A()
    //     }
    //     return instance
    //   }
    // })()
    // const p1 = singleMode()
    // const p2 = singleMode()

    // 单例弹窗
    const model = (function () {
      let instance = null
      class Model {
        constructor() {
          this.ele = document.createElement('div')
          this.ele.className = 'model'
          document.body.appendChild(this.ele)
          this.ele.style.display = 'none'
          this.bindEvent()
          this.successCallback = () => { }
          this.cancelCallback = () => { }
          this.close = () => { }
          this.queue = [];
        }
        bindEvent() {
          document.addEventListener('click', (e) => {
            if (e.target.className === 'ok') {
              this.successCallback?.()
            } else if (e.target.className === 'cancel') {
              this.cancelCallback?.()
            } else if (e.target.className === 'close') {
              this.close?.()
            }
          })
        }
        onExecute(content, success, close, cancel) {
          this.ele.style.display = 'flex'
          this.ele.innerHTML = `<div class="title">
      <span>标题</span>
      <span class="close">x</span>
    </div>
    <div class="content">${content}</div>
    <div class="footer">
      <button class="cancel">取消</button>
      <button class="ok">确定</button>
    </div>`
          this.successCallback = success;
          this.cancelCallback = cancel;
          this.close = close
          setTimeout(() => {
            this.hide()
            this.queue.shift()
            if (this.queue.length) {
              setTimeout(() => {
                const { content, success, close, cancel } = this.queue[0]
                this.onExecute(content, success, close, cancel)
              }, 500)
            }
          }, 1500)
        }
        show({ content, success, close, cancel }) {
          if (!this.queue.length) {
            this.onExecute(content, success, close, cancel)
          }
          this.queue.push({ content, success, close, cancel })

        }
        hide() {
          this.ele.style.display = 'none';
          this.ele.innerHTML = ''
        }
      }
      return () => {
        if (!instance) {
          instance = new Model()
        }
        return instance
      }
    })()()




    document.getElementById('show').addEventListener('click', () => {
      model.show({
        content: '我是内容' + count,
        success: () => {
          console.log('success')
        },
        cancel: () => {
          console.log('cancel')
        },
        close: () => {
          // console.log('hide')
          model.hide()
        }
      })
      count++
    })
  </script>
</body>

</html>